<template>
	<!--    数据查询-->
	<div id="C1">
		<div id="searchbox">
			<el-form :inline="true" :model="searchKeyWords" class="demo-form-inline">
				<el-form-item label="请输入你要查询的会员号">
					<el-input v-model="searchKeyWords.number" placeholder="会员号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button  type="primary" @click="dialogFormVisible = true">新增会员</el-button>
				</el-form-item>
			</el-form>
			<el-dialog  title="新增会员信息" :visible.sync="dialogFormVisible" center width="400px">
				<el-form  inline :model="insertKeyWords" class="demo-form-inline" ref="insertKeyWords" :rules="rules">
					<el-form-item label="会员号" prop="user_id">
						<el-input v-model="insertKeyWords.user_id" placeholder="会员号" clearable></el-input>
					</el-form-item>
					<el-form-item label="会员卡号" prop="number" >
						<el-input v-model="insertKeyWords.number" placeholder="会员卡号" clearable></el-input>
					</el-form-item>
					<el-form-item label="会员状态" prop="state">
						<template>
							<el-select v-model="insertKeyWords.state " placeholder="会员状态" clearable>
								<el-option disabled label="请选择" value="" ></el-option>
								<!--							<el-option :v-for="item in ClassifyName" :value="item.name"></el-option>-->
								<el-option label="正常" value="正常"></el-option>
								<el-option label="冻结" value="冻结"></el-option>
								<el-option label="挂失" value="挂失"></el-option>
							</el-select>
						</template>
					</el-form-item>
					<el-form-item label="积分" prop="score" >
						<el-input v-model="insertKeyWords.score" placeholder="积分" clearable></el-input>
					</el-form-item>
					<el-form-item label="信用度" prop="credit_rate" >
						<el-input v-model="insertKeyWords.credit_rate" placeholder="信用度" clearable></el-input>
					</el-form-item>
					<el-form-item label="会员折扣" prop="discount" >
						<el-input v-model="insertKeyWords.discount" placeholder="会员折扣" clearable></el-input>
					</el-form-item>
					<el-form-item label="会员等级" prop="level" >
						<el-input v-model="insertKeyWords.level" placeholder="会员等级" clearable></el-input>
					</el-form-item>
					<el-form-item label="卡中的现金" prop="money" >
						<el-input v-model="insertKeyWords.money" placeholder="卡中的现金" clearable></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="newCP">确 定</el-button>
				</div>
			</el-dialog>
		</div>
		<!--        表格渲染-->
		<template>
			<el-table
					:data="isGetData ? getCurrentData:searchCurrentData"
					style="width: 100%">
				<el-table-column
						fixed="left"
						label="会员号"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.user_id }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="会员卡号"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.number }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="会员状态"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.state }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="会员积分"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.score }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="信用度"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.credit_rate }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="会员折扣"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.discount }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="会员等级"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.level }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="卡中的现金"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.money }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="最近一次冻结时间"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.freeze_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="最近一次挂失时间"
					align="center"
					width="180">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{  scope.row.loss_time }}</span>
				</template>
			</el-table-column>
				<el-table-column
						label="最近一次会员卡使用日期"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.merge_time }}</span>
					</template>
				</el-table-column>
				<el-table-column
						label="最近一次会员卡修改日期"
						align="center"
						width="180">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{  scope.row.update_time }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200" align="center" fixed="right">
					<template slot-scope="scope">
						<Hyedit  :editData='scope.row' @queren="handleEdit(scope.$index, scope.row)"></Hyedit>
						<Hydel :delId="scope.row.number"  @queren="handleDelete(scope.$index, scope.row)"></Hydel>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<!--        分页-->

		<div id="PageBox" class="block">
			<el-pagination
					background
					:current-page="isGetData? gcurrentPage:scurrentPage"
					@current-change="handleCurrentChange"
					:page-size="5"
					layout="prev, pager, next"
					:total="isGetData ? getTotalData:searchTotalData">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {mapActions} from 'vuex'
	import Hydel from '../../components/houtai/Hydel'
	import Hyedit from '../../components/houtai/Hyedit'


	export default {
		name: "cpsz",
		components:{
			Hydel ,
			Hyedit ,
		} ,
		data(){
			return{
				dialogFormVisible: false,
				isGetData:true,    //如果是页面渲染数据，table渲染数据源就是Getdata,否则,就是数据查询数据渲染，数据源就是searchData
				gcurrentPage: 1,   //当前页
				scurrentPage: 1,   //当前页
				searchKeyWords: {     //查询关键字存储
					number: '',
					pageNum:this.scurrentPage
				},
				insertKeyWords: {     //查询关键字存储
					user_id: '',
					number: '',
					state:'',
					score:'',
					credit_rate:'',
					discount:'',
					level:'',
					money:'',
					freeze_time:'',
					loss_time:'',
					merge_time:'',
					update_time:'',
				} ,


				rules: {
					user_id: [
						{ required: true, message: '请输入会员号', trigger: 'blur' },
					],
					number: [
						{ required: true, message: '请输入会员卡号', trigger: 'blur' },
					],
					state: [
						{ required: true, message: '请选择状态', trigger: 'blur' }
					],
					score: [
						{ required: true, message: '请输入积分', trigger: 'blur' }
					],
					credit_rate: [
						{ required: true, message: '请输入信用度', trigger: 'blur' }
					],
					discount: [
						{ required: true, message: '请输入会员折扣价', trigger: 'blur' }
					],
					level: [
						{ required: true, message: '请输入会员等级', trigger: 'blur' }
					],
					money: [
						{ required: true, message: '请输入卡中的现金', trigger: 'blur' }
					]
				}
			}
		},

		computed:{
			AllStaff(){
				return this.$store.state.yygl.AllStaff
			},
			getCurrentData(){
				return this.$store.state.yygl.getCurrentDataD
			},
			getTotalData(){
				return 100
			},
			searchCurrentData(){
				return this.$store.state.yygl.searchCurrentDataD
			},
			searchTotalData(){
				return 50
			}
		},
		methods:{
			SPerson:function(selectPerson){
				// console.log(selectPerson)
				// console.log(selectPerson)
				this.editData.g_person =selectPerson.toString()
			},
			success() {
				this.$notify.success({
					title: '成功',
					message: '新增成功！',
					offset:50
				});
			},
			error() {
				this.$notify.error({
					title: '错误',
					message: '网络出故障了，添加失败，请稍后重试！'
				});
			},
			...mapActions(['getCurrentDataC','searchCurrentDataC']),
			newCP(){

				console.log(this.$refs.insertKeyWords)

				this.$refs.insertKeyWords.validate((valid) => {
					if (valid) {
						this.$axios({
							url: '/InsertSeats',
							method: 'post',
							data: {
								number: this.insertKeyWords.number,
								people_num: this.insertKeyWords.people_num,
								state:this.insertKeyWords.state,
								type:this.insertKeyWords.type,
							}
						}).then(res => {
							if (res.code === 200) {
								this.dialogFormVisible = false
								this.success()
								this.getCurrentDataC(1)
							} else {
								this.error()
							}
						})
					} else {
						this.$notify.error('请检查提交数据的正确性！是否满足提示要求？')
					}
				})
			}   ,
			onSubmit(){
				this.isGetData=false
				let searchData=this.searchKeyWords
				this.searchCurrentDataC(searchData)
			},
			handleEdit(index,item){
				// console.log(111)
				this.getCurrentDataC(this.gcurrentPage)
				// this.editItem=item
			},
			handleDelete(index,item) {
				if (this.isGetData) {
					if (res.code === 200) {
						this.getCurrentDataC(this.gcurrentPage)
					}
				}else {
					if (res.code === 200) {
						let searchData = this.searchKeyWords
						this.searchCurrentDataC(searchData)
					}
				}
			},
			handleSizeChange(){

			},
			handleCurrentChange(val){
				if(this.isGetData){
					this.gcurrentPage=val
				}else{
					this.scurrentPage=val
				}

			}
		} ,
		created() {
			this.getCurrentDataC(1).then(res=>{
				// console.log(res)
			})
		}


	}
</script>

<style lang="less" scoped>
	#PageBox{
		padding: 10px;
		text-align: left;
		position: absolute;
		bottom: 10px;
		left: 20px;
	}
	#xiaoshou{
		cursor: pointer;
	}
	#C1{
		/*margin: auto;*/
		margin-left: 50px;
		margin-top: 10px;
		width: 1100px;
		height: 560px;
		position: relative;
		#searchbox{
			width: 1000px;
			text-align: left;
		}
	}
</style>
